<table ng-if="current_tab=='scopes'" class="table table-striped table-condensed">
  <thead>
    <th style="width: 30px">#</th>
    <th style="width: 400px" ng-class="{'active': scopes_predicate == 'name' }" ng-click="scopes_predicate = 'name'; scopes_reverse=!scopes_reverse">
      Scope
      <span ng-if="scopes_predicate == 'name' && scopes_reverse == true">▼</span>
      <span ng-if="scopes_predicate == 'name' && scopes_reverse == false">▲</span>
    </th>
    <th style="width: 50px"></th>
    <th ng-class="{'active': scopes_predicate == 'count' }" ng-click="scopes_predicate = 'count'; scopes_reverse=!scopes_reverse">
      Count
      <span ng-if="scopes_predicate == 'count' && scopes_reverse == true">▼</span>
      <span ng-if="scopes_predicate == 'count' && scopes_reverse == false">▲</span>
    </th>
  </thead>
  <tbody>
    <tr ng-repeat="scope in scopes_data | orderBy:scopes_predicate:scopes_reverse">
      <td>{{::$index+1 }}</td>
      <td>{{::scope.name }}</td>
      <td style="text-align: right;">{{ scope.count }}</td>
      <td>
        <span style="position: relative;top:3px;background-color: #3CA3C1; width: {{scope.count}}px; height: 16px; display: inline-block;"></span>
      </td>
    </tr>
  </tbody>
</table>
